<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title>意见反馈</title>
		<meta name="viewport" content="width=device-width, initial-scale=1,maximum-scale=1, user-scalable=no">
		<meta name="apple-mobile-web-app-capable" content="yes">
		<meta name="apple-mobile-web-app-status-bar-style" content="black">
		<link rel="stylesheet" href="../../plugins/mui/mui.min.css">
		<script src="../../js/statistics.js"></script>
		<style type="text/css">
			 *{
            box-sizing: border-box;
            font-family: 'Microsoft YaHei';
	        }
	        body, div, dl, dt, dd, ul, ol, li, h1, h2, h3, h4, h5, h6, form,  input, p, table, th, td ,select,option{
	            padding: 0;
	            margin: 0;
	            list-style: none;
	        }
	        body{
	        	padding-top:45px;
	        	padding-bottom:10px;
	        }
			/*title的样式覆盖*/
			.mui-bar{
				background-color:#2a2c33;
				top:0;
			}
			.mui-bar>a{
				color:#fff;
			}
			.mui-title{
				color:#fff;
			}
			/*列表数字角标移动防止盖住右箭头*/
			.mui-table-view:before{
				display:none;
			}
			.mui-table-view:after{
				display:none;
			}
			.mui-table-view-cell:after{
				background-color:#e5e5e5;
			}
			
			/*百分比优化*/
			.mui-table-view-cell {
				padding: 11px 4%;
			}
			.mui-table-view-cell>a:not(.mui-btn){
				margin: -11px -4%;
			}
			.mui-navigate-right:after, .mui-push-right:after {
				right: 4%;
				
			}
			.mui-switch .mui-switch-mini{
				right:4%;
			}
			/*开关 off on替换 开关*/
			/*.mui-switch.mui-active:before{
				content:'开';
			}
			.mui-switch:before{
				content:'关';
			}*/
			.top{
				background-color:#fff;
				font-size:15px;
				padding-left:3.4%;
				line-height: 35px;
				border-bottom:1px solid #e5e5e5;
				margin-top:10px;
			}
			.main1{
				background-color:#fff;
				padding:10px;
				padding-left:3.4%;
				padding-right:3.4%;
			}
			textarea{
				margin:0;
				padding:0;
				padding:10px;
				height:130px;
				font-size:14px;
				background-color:#f1f1f1;
				border:none;
			}
			.mui-input-clear{
				margin-bottom:0!important;
				border:none!important;
				background-color:#f1f1f1!important;
			}
			.mui-btn{
				display:block;
				width:94%;
				padding-left: 3%;
				padding-right: 3%;
				margin:0 auto;
				height:40px;
				background-color: #58b8f4;
				border-color:#58b8f4;
				font-size: 15px;
				margin-top:10px;
				
			}
			#imgAdd {
			   height: 90px;
				width: 90px;
			    float: left;
			    position: relative;
			    margin-top: 10px;
			    margin-bottom:10px;
			   margin-left: 3.4%;
			   
			    float: left;
			    border-radius: 3px;
			    overflow: hidden;
			}
			#imgAdd>a {
			    height: 90px;
				width: 90px;
			    outline: none;
			    display: block;
			    border-radius: 3px;
			    background: #f1f1f1 url(../../images/my/index/forum-add-2.png) no-repeat center center;
			    background-size: 50px 50px;
			    overflow: hidden;
			}
			.testDiv {
				height: 90px;
				width: 90px;
				float: left;
				position: relative;
				margin-top: 10px;
				margin-bottom:10px;
				margin-left: 3.4%;
				float: left;
				border-radius: 3px;
				overflow: hidden;
				border:1px solid #e5e5e5;
			}
			.testDiv>a {
			    width: 22px;
			    height: 22px;
			    position: absolute;
			    right: 5px;
			    top: 5px;
			    background: url(../../images/my/index/forum-add-3.png) no-repeat 0 0;
			    background-size: cover;
			    display: block;
			}
			.imglist {
			    height: 90px;
				width: 90px;
			    display: block;
			}
			#pic{
				height:110px;
				background-color:#fff;
			}
			
			/*图片预览*/
		.mui-preview-image.mui-fullscreen {
			position: fixed;
			z-index: 20;
			background-color: #000;
		}
		.mui-preview-header,
		.mui-preview-footer {
			position: absolute;
			width: 100%;
			left: 0;
			z-index: 10;
		}
		.mui-preview-header {
			height: 44px;
			top: 0;
		}
		.mui-preview-footer {
			height: 50px;
			bottom: 0;
			text-align: center;
		}
		.mui-preview-header .mui-preview-indicator {
			display: block;
			line-height: 25px;
			color: #fff;
			text-align: center;
			margin: 15px auto;
			width: 70px;
			background-color: rgba(0, 0, 0, 0.4);
			border-radius: 12px;
			font-size: 16px;
		}
		.mui-preview-image {
			display: none;
			-webkit-animation-duration: 0.5s;
			animation-duration: 0.5s;
			-webkit-animation-fill-mode: both;
			animation-fill-mode: both;
		}
		.mui-preview-image.mui-preview-in {
			-webkit-animation-name: fadeIn;
			animation-name: fadeIn;
		}
		.mui-preview-image.mui-preview-out {
			background: none;
			-webkit-animation-name: fadeOut;
			animation-name: fadeOut;
		}
		.mui-preview-image.mui-preview-out .mui-preview-header,
		.mui-preview-image.mui-preview-out .mui-preview-footer {
			display: none;
		}
		.mui-zoom-scroller {
			position: absolute;
			display: -webkit-box;
			display: -webkit-flex;
			display: flex;
			-webkit-box-align: center;
			-webkit-align-items: center;
			align-items: center;
			-webkit-box-pack: center;
			-webkit-justify-content: center;
			justify-content: center;
			left: 0;
			right: 0;
			bottom: 0;
			top: 0;
			width: 100%;
			height: 100%;
			margin: 0;
			-webkit-backface-visibility: hidden;
		}
		.mui-zoom {
			-webkit-transform-style: preserve-3d;
			transform-style: preserve-3d;
		}
		.mui-slider .mui-slider-group .mui-slider-item img {
			width: auto;
			height: auto;
			max-width: 100%;
			max-height: 100%;
		}
		.mui-android-4-1 .mui-slider .mui-slider-group .mui-slider-item img {
			width: 100%;
		}
		.mui-android-4-1 .mui-slider.mui-preview-image .mui-slider-group .mui-slider-item {
			display: inline-table;
		}
		.mui-android-4-1 .mui-slider.mui-preview-image .mui-zoom-scroller img {
			display: table-cell;
			vertical-align: middle;
		}
		.mui-preview-loading {
			position: absolute;
			width: 100%;
			height: 100%;
			top: 0;
			left: 0;
			display: none;
		}
		.mui-preview-loading.mui-active {
			display: block;
		}
		.mui-preview-loading .mui-spinner-white {
			position: absolute;
			top: 50%;
			left: 50%;
			margin-left: -25px;
			margin-top: -25px;
			height: 50px;
			width: 50px;
		}
		.mui-preview-image img.mui-transitioning {
			-webkit-transition: -webkit-transform 0.5s ease, opacity 0.5s ease;
			transition: transform 0.5s ease, opacity 0.5s ease;
		}
		.remark{
			text-align: center;line-height: 8vw;background: #ffffff;margin-top: 3vw;
		}
		.remark span{
			display: block;
		}
		@-webkit-keyframes fadeIn {
			0% {
				opacity: 0;
			}
			100% {
				opacity: 1;
			}
		}
		@keyframes fadeIn {
			0% {
				opacity: 0;
			}
			100% {
				opacity: 1;
			}
		}
		@-webkit-keyframes fadeOut {
			0% {
				opacity: 1;
			}
			100% {
				opacity: 0;
			}
		}
		@keyframes fadeOut {
			0% {
				opacity: 1;
			}
			100% {
				opacity: 0;
			}
		}
		</style>
	</head>
	<body>
		<header class="mui-bar mui-bar-nav">
			<a class="mui-action-back mui-icon mui-icon-left-nav mui-pull-left"></a>
			<h1 class="mui-title">意见反馈</h1>
		</header>
		<div class='top'>
			意见反馈
		</div>
		<div class='main1'>
			<textarea id="textarea" rows="5" placeholder="亲，您遇到什么系统问题，或者有什么功能建议吗？欢迎反馈给我们，以便我们能及时为您解决，谢谢！" maxlength="80"></textarea>
		</div>
		<div class='top' >
			添加图片（可选）
		</div>
		
		<div id="pic" >
	            <div id="Img">
	                <div id="imgAdd">
	                    <a></a>
	                </div>
	            </div>
	    </div>
		
		<div class='top' >
			联系方式
		</div>
		<div class='main1'>
			<div class="mui-input-row">
		        <input type="text" class="mui-input-clear" placeholder="电话/QQ/邮箱" style='line-height: 20px;' id='input1' maxlength="16">
			</div>
		</div>

		<button type="button" class="mui-btn mui-btn-success" id='submit1'>提交</button>
		<p class="remark">
			<span>提交成功您将获得5积分哦！</span>
			<span>联系电话：4008288609</span>	
		</p>
		<script src="../../plugins/jquery/jquery-3.1.0.min.js"></script>
		<script src="../../plugins/mui/mui.min.js"></script>
		<script src="../../js/getApiToken.js"></script>
		<script src="../../js/md5.js"></script>
		<script src="../../plugins/mui/mui.zoom.js"></script>
		<script src="../../plugins/mui/mui.previewimage.js"></script>
		<!--<script type="text/javascript" src="../plugins/mui/update.js"></script>-->
		<script type="text/javascript">
			mui.init({
   				
	  		});
	  		
	  		var numlist=[];
	  		var imgNum=0;
	  		mui.plusReady(function() {
				  //关闭等待框
				plus.nativeUI.closeWaiting();
				    //显示当前页面
				mui.currentWebview.show('slide-in-right',200);
				
				$('#imgAdd').click(function(){chooseImgFromAlbums()});
				//从相册选择
				function chooseImgFromAlbums(){
					plus.gallery.pick(function(file) {
						changeToLocalUrl(file);
					},
					function(err) {
						console.log(JSON.stringify(err));
						
					}, 
					{
					filter: 'image',
					multiple: false
					});
				}
				
				//拍照选择头像
				function chooseImgFromPictures() {
					mui('#sheet1').popover('toggle');
					var cmr = plus.camera.getCamera();
					cmr.captureImage(function(file) {
					changeToLocalUrl(file);
					}, function(err) {
						
						console.log(JSON.stringify(err));
					}, {
					index: '2',
					});
				}
				
				//接受到头像 进行处理跳转
				function changeToLocalUrl(path) {
					plus.io.resolveLocalFileSystemURL(path, function(entry) {
						entry.file( function ( file ) {
							if(file.size/1024/1024<5){
								var multiple=1-(file.size/1024/1024/5).toFixed(1);
								uploadHead(entry.toLocalURL(),multiple);
								plus.nativeUI.showWaiting('上传中...');
							}else{
								mui.toast('图片大于5M,请重新上传');
							}
						}, function ( e ) {
							alert( e.message );
						} );
	
						
					});
				}
				//把新头像更新到页面
				function uploadHead(imgPath,b) { 
	//		            mainImage.src = imgPath; 
			            var image = new Image(); 
			            image.src = imgPath; 
			            image.onload = function() { 
			                var imgData = getBase64Image(image,b); 
			                numlist.push(imgData.substring(23));
			                imgNum++;
			                var  result= new Image();
			                $(result)[0].src=imgData;
			                $(result).attr('data-preview-group','1');
			                $(result).attr('data-preview-src','');
					        $(result).addClass('imglist');
					        var testDiv=document.createElement("div");
					        var z=document.createElement("a");
					        $(z).click(function(){del(this)})
					        $(testDiv).append(z);
					        $(testDiv).append(result).addClass('testDiv');
					        $('#imgAdd').before(testDiv);
					        plus.nativeUI.closeWaiting();
					        mui.previewImage();
					        if(imgNum==3){
					        	$('#imgAdd').hide();
					        }
			            } 
			    } 
	        	//将图片压缩转成base64 
		        function getBase64Image(img,b) { 
		            var canvas = document.createElement("canvas"); 
		            var width = img.width; 
		            var height = img.height; 
		            // calculate the width and height, constraining the proportions 
		            //图片比例一定的取中间
		            var x,y,c,z;
		            if (width > height) { 
						x=(width-height)/2;
						y=0;
						c=height;
						z=height;
		            } else if(width < height){ 
						x=0;
						y=(height-width)/2;
						c=width;
						z=width;
		            }else{
		            	x=0;
						y=0;
						c=width;
						z=height;
		            }
					var clipArea = document.getElementById("clipArea");
		            canvas.width = width;   /*设置新的图片的宽度*/ 
		            canvas.height = height; /*设置新的图片的长度*/ 
		            var ctx = canvas.getContext("2d"); 
		            ctx.drawImage(img,0,0,width,height); /*绘图*/ 
		            var dataURL = canvas.toDataURL("image/jpeg",.1); 
		           	return dataURL;
		        } 
				
				//图片删除函数
				function del(b){
			        numlist.splice($(b).parent().index(),1);
			        $(b).parent().fadeOut(250).delay(100).remove();
			        imgNum--;
			        if(imgNum<2){
			        	$('#imgAdd').show();
			        }
			    }
				
				
				$('#submit1').click(function(){
					if(!$('#textarea').val().trim()){
						mui.toast('意见反馈内容不能为空');
					}else if(!$('#input1').val().trim()){
						mui.toast('联系方式不能为空');
					}else{
						plus.nativeUI.showWaiting('提交中...');
						myAjax('personal/feedback/setFeedBack', 'post', {
								'user_id': plus.storage.getItem('cg_user_id'),
								'user_token': plus.storage.getItem('cg_user_token'),
								'content':$('#textarea').val(),
								'concat':$('#input1').val(),
								'list_img':numlist
							}, function(data) {
									if(data.success){
										plus.nativeUI.closeWaiting();
										mui.toast('意见反馈提交成功');
										plus.webview.currentWebview().close();
								}else{
									mui.toast(data.error_msg);
								}
							})
						
						
					}
				})
				
			});
		</script>
	</body>
</html>

